{% extends 'base.html' %}

{% block main %}

<div class="container">
    <div class="row clearfix">
        <h2 class="text-center">菜品列表</h2>
        <div class="col-md-12 column">
            <div class="row clearfix">
                {% for food in page_foods %}
                <div class="col-md-4 column">
                    <a href="{% url 'BoosAPP:food_details' %}?id={{food.id}}">

                        <img alt="140x140" src="{{food.img}}" width="100px" height="100px" />
                        <span>{{food.name}}</span>
                        <span>价格：￥{{food.price}}</span>
                        <span>销量：{{food.sales}}</span>
                    </a>
                </div>
                {% endfor %}

            </div>
        </div>

        <div class="col-md-12 column text-center">
            <ul class="pagination ">
                {% if  page_foods.has_previous %}
                <li>
                    <a href="{% url 'BoosAPP:food_lis' %}?page={{page_foods.previous_page_number }}">前一页</a>
                </li>
                {% else %}
                <li class="disabled">
                    <a href="" >前一页</a>
                </li>

                {% endif %}
                {% for p in paginator.page_range  %}

                <li {% if p == page %} class="active" {% endif %} >
                    <a href="{% url 'BoosAPP:food_lis' %}?page={{p}}" >{{p}}</a>
                </li>
                {% endfor %}

                {% if  page_foods.has_next %}
                <li>
                    <a href="{% url 'BoosAPP:food_lis' %}?page={{page_foods.next_page_number  }}">后一页</a>
                </li>
                {% else %}
                <li class="disabled">
                    <span href="" >后一页</span>
                </li>

                {% endif %}
            </ul>
        </div>
    </div>
</div>


{% endblock %}